<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>内容差异比较</title>
    <link rel="shortcut icon" href="/res/img/favicon.ico" type="image/x-icon">
    <link href="/res/layui/css/layui.css" rel="stylesheet">
    <link href="/res/codemirror6.65.7/codemirror.min.css" rel="stylesheet">
    <link href="/res/codemirror6.65.7/merge.min.css" rel="stylesheet">
    <link href="/res/css/common.css" rel="stylesheet">
    <style>
        .CodeMirror-sizer {
            width: 96vw;
        }

        .CodeMirror-merge, .CodeMirror-merge .CodeMirror {
            height: 98vh;
        }

        .CodeMirror-merge-r-deleted {
            background-color: #f9a9a9;
        }

        .CodeMirror-merge-r-inserted {
            background-color: #a4f07e;
        }
    </style>
</head>
<body class="layui-anim layui-anim-downbit" style="height: 100%">
<textarea id="old" style="display: none">${old!}</textarea>
<textarea id="new" style="display: none">${new!}</textarea>
<div class="flex-row" style="align-items: center;margin: 10px">
    <span style="margin-right: 20px">左边为当前配置，右边为上次配置。配置变更时间: ${time?string("yyyy-MM-dd HH:mm:ss")}</span>
    <button id="left" type="button" class="layui-btn layui-btn-primary layui-btn-sm">回滚到<b
                style="color: red">左边</b>版本
    </button>
    <button id="right" type="button" class="layui-btn layui-btn-primary layui-btn-sm">回滚到<b
                style="color: red">右边</b>版本
    </button>
</div>
<div class="flex-row" style="height: 98%;width: 100%">
    <div id="diff"></div>
</div>
<script src="/res/js/request.js"></script>
<script src="/res/layui/layui.js"></script>
<script src="/res/codemirror6.65.7/codemirror.js"></script>
<script src="/res/codemirror6.65.7/xml.min.js"></script>
<script src="/res/codemirror6.65.7/merge.min.js"></script>
<script src="/res/js/jquery.min.js"></script>
<#--必须添加差异对比-->
<script src="/res/js/diff-match-patch.js"></script>
<script>
    CodeMirror.MergeView(document.getElementById("diff"), {
        value: $('#new').val(),//上次内容
        origLeft: null,
        orig: $('#old').val(),//本次内容
        lineNumbers: true,//显示行号
        mode: "xml",
        highlightDifferences: true,
        connect: 'align',
        readOnly: true,//只读 不可修改
        width: '80vw',
        height: '800px'
    });

    $('#left').click(function () {
        layer.prompt({
            title: '提示', formType: 2,
            success: function (layero, index, that) {
                var textarea = $(layero).find('textarea');
                textarea.attr('placeholder', '修改备注, 不能为空')
                textarea.css('margin-top', '10px')
                textarea.before(`确认回退到<b style="color: red">左边</b>配置并重启网关？`)
            }
        }, function (txt, index) {
            if (!txt || txt.length < 1) {
                layer.msg('备注不能为空')
                return
            }
            if (txt.length > 125) {
                layer.msg('备注不能超过125个字符')
                return
            }
            layer.close(index);
            back('left', txt)
        });
    })
    $('#right').click(function () {
        layer.prompt({
            title: '提示', formType: 2,
            success: function (layero, index, that) {
                var textarea = $(layero).find('textarea');
                textarea.attr('placeholder', '修改备注, 不能为空')
                textarea.css('margin-top', '10px')
                textarea.before(`确认回退到<b style="color: red">左边</b>配置并重启网关？`)
            }
        }, function (txt, index) {
            if (!txt || txt.length < 1) {
                layer.msg('备注不能为空')
                return
            }
            if (txt.length > 125) {
                layer.msg('备注不能超过125个字符')
                return
            }
            layer.close(index);
            back('right', txt)
        });
    })

    function back(type, remark) {
        var index = layer.msg('请等待', {icon: 16, shade: 0.6, time: 10000});
        request.post('/api/configBack', {
            data: {id: '${id!}', type: type, remark: remark},
            success(res) {
                if (res.msg && res.msg.indexOf('无变化') !== -1) {
                    layer.msg(res.msg)
                    return
                }
                layer.msg('操作完成', {icon: 1});
                setTimeout(function () {
                    window.parent.location.reload()
                }, 1700)
            },
            finally() {
                layer.close(index);
            }
        })
    }
</script>

</body>
</html>